<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		*{margin: 0;padding: 0;} 
		html,body{width: 100%;height: 100%;}/**/
		h1{color: #fff;text-align: center;line-height: 80px;}
		.media{width: 450px;height: 300px;line-height: 300px;margin: 40px auto;}
		.btn{width: 250px;height:50px; line-height:50px; margin: 20px auto; text-align: center;}
		#login{width: 200px;height:50px;background-color: skyblue;text-align: center;line-height: 50px;color: #fff;}
		#canvas{display: none;}
		
	</style>
</head>
<body>
	<h1>百度云人脸登录</h1>
	<div class="media">
		<video id="video" width="450" height="300" src="" autoplay></video>
		<canvas id="canvas" width="450" height="300"></canvas>
		
	</div>
	<div class="btn"><button id="login" >登录按钮</button></div>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
	/**调用摄像头，获取媒体视频流**/
	var video = document.getElementById('video');
	//返回画布二维画图环境
	var userContext = canvas.getContext("2d");
	var getUserMedia = 
		//浏览器兼容,表示在火狐、Google、IE等浏览器都可正常支持
		(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
		//getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)
		getUserMedia.call(navigator,{video: true,audio: false},function(localMediaStream){
			//获取摄像头捕捉的视频流
			video.srcObject=localMediaStream;
		},function(e){
			console.log("获取摄像头失败！！")
		});
	//点击按钮登录事件
	 var btn = document.getElementById("login");
	btn.onclick = function () {
           //点击按钮时拿到登陆者面部信息
           userContext.drawImage(video,0,0,450,300);
           var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
         //拿到bash64格式的照片信息
           var faceBase = userImgSrc.split(",")[1];
           //ajax异步请求
           $.ajax({
        	   url: "login",
        	   type: "post",
        	   data: {"faceBase": faceBase},
        	   success: function(result){
        		   if(result==='1'){
        			   alert("登录成功！！")
   					   //跳转至登录页面
        			   window.location.href="toSuccess";
        		   }else{
        			   alert("人脸识别失败！！");
        			   //跳转至登录失败页面
        			   window.location.href="toErro";
        			   
        		   }
        	   }
           })
       } 
	</script>
</body>
</html>